<!--
 * @Author: your name
 * @Date: 2021-02-26 14:25:42
 * @LastEditTime: 2021-04-29 13:38:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /www/dtk_static_www_user_center/html/单页html/首页.html
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <meta content="yes" name="apple-mobile-web-app-capable"><meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <script type="text/javascript" src="https://public.ffquan.cn/lib/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/vue-lazyload.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/swiper/js/swiper.min.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/clipboard.min.js"></script>
    <script type="text/javascript" src="https://p1static.dataoke.com/web/js/layer/layer.js?t=202104191256"></script>
    
 
    <title>限量1元购</title>
    <script>
        
        var _config = {
            appKey: '#APPKEY#',//此处替换成用户appKey
            jumpGoodsUrl: function (items) {   // 替换为详细页面的地址或转链逻辑 
                 wx.miniProgram.navigateTo({ url: '/pagesA/pages/mallA/detail?pt=tb&goodsid=' + items.goodsid })
            }
        };
    </script>
    <style>
        a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:transparent;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{font-family:Arial,PingFang SC,-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}
        #appMain{
            margin: auto; font-size: .28rem; overflow: hidden; position: relative; z-index: 1;
            overflow: hidden;
        }
        .tmall-one-layout{
            background: url(https://sr.ffquan.cn/dtk_www/20210413/c1qfign6vrkc1f9d9to00.png) no-repeat center top #F52157;
            background-size: 100% auto; min-height: 100vh; width: 100%; 
            text-align: center; padding-top: 4.95rem;
        }
        .tmall-one-layout .time{
            height: .53rem; border:solid .04rem #FBEEC9; border-radius: 100rem;
            background: linear-gradient(180deg, #FFE8B7 0%, #FFCD80 100%);
            line-height: .43rem; text-emphasis: center; display: inline-block; margin: auto;
            color: #B60E3A; font-size: .26rem; font-weight: bold; padding: 0 .2rem;
        }

        .tmall-one-layout .desc{
            color: #fff; font-size: .22rem; line-height: .4rem; padding: .2rem 0 .7rem 0;
        }

        .hot-row{
            background: linear-gradient(180deg, #FFF0DC 0%, #FDDDB6 100%);
            border-radius: .2rem; position: relative; z-index: 0; padding-bottom: .14rem;
            margin: 0 .15rem;
        }
        .hot-row  .title{
            background: url(https://sr.ffquan.cn/dtk_www/20210413/c1qfign6vrkc1f9d9to01.png) no-repeat center top;
            background-size: 100% auto; width: 4.46rem; height: .85rem; text-align: center; 
            position: relative; z-index: 0; top: -.425rem;
            font-size: .22rem;color: #FFEDDF; margin: 0 auto;
        }
        .hot-row  .title span{
            color: #FFEDDF; font-size: .32rem; display: block;position: relative; top: .05rem;
        }
        .hot-row .list{
            background: linear-gradient(360deg, #FDDBAA 0%, #FBC78E 100%);
            border-radius: .16rem; margin: 0 .1rem ; padding: .1rem 0;
        }
        .hot-row .list .pic{
            border-radius: .1rem; margin: 0 .1rem;
        }
        .hot-row .list .pic img{
            width: 100%; border-radius: .1rem; 
        }

        .hot-row .list .bt{
            text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;display: -webkit-box;word-wrap: break-word;  white-space: normal;  word-break: break-all;
            font-size: .22rem; height: .7rem; color: #6B170B; line-height: .35rem;  text-align: left; margin: 0 .1rem .1rem;
        }
        .hot-row .list .bt img{
            width: 14px;
            height: 14px;
            position: relative;
            top: 2px;
            margin-right: 3px;
        }

        .hot-row .list .quan{
            text-align: left; margin: 0 .1rem; color: #FF0036; font-size: .22rem; padding-bottom: .1rem;
        }
        .hot-row .list .quan b{
            font-size: .4rem;
        }
        .hot-row .list .btn a{
            background: #179A2F;
            border-radius: 22px; height: .44rem; margin: 0 .1rem;
            color: #fff; line-height: .44rem; display: block; font-size: .26rem;
        }
        .hot-row .list .btn.active a{
            background: #f52157;
        }

        .myswiper{
            margin: 0 .1rem; position: relative; top: -.1rem; padding: .5rem 0 .2rem; overflow: hidden;
        }


        .bts{
            text-align: center; color: #FFEDDF; font-size: .24rem; padding: .4rem 0 .2rem;
        }
        .bts span{
            font-size: .4rem; display: block;
        }

        .goodslist{
            margin: 0 .24rem; 
            padding-bottom: .1rem;
        }
        .goodslist .list{
            background: #fff; border-radius: .08rem; overflow: hidden;
            display: flex; margin-bottom: .24rem;
        }
        .goodslist .list .pic{
            width: 2.72rem; height: 2.72rem; 
        }
        .goodslist .list .pic img{
            width: 100%; display: block;
        }
        .goodslist .list .center{
            width: calc(100% - 2.95rem); text-align: left; margin-left: .26rem; position: relative; z-index: 0;
            padding-top: .18rem; 
        }
        .goodslist .list .center h4{
            text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;display: -webkit-box;word-wrap: break-word;  white-space: normal;  word-break: break-all;
            font-size: .26rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #17233D;
            line-height: .37rem; margin-bottom: .1rem;
        }
        .goodslist .list .center h4 img{
            width: 14px;
            height: 14px;
            position: relative;
            top: 2px;
            margin-right: 3px;
        }
        .goodslist .list .center .coupon{
            display: inline-flex; justify-items: center; align-items: center;
            background: #ff4f4f; color: #fff; padding: .02rem; font-size: .3rem;border-radius: .05rem;
        }
        .goodslist .list .center .coupon span{
            background: #fff; height: .3rem;  border-radius: .05rem; color: #ff4f4f;font-size: .2rem; padding: 0 .1rem;
        }
        .goodslist .list .center .coupon i{
            font-size: .2rem; padding: 0 .05rem;
        }

        .goodslist .list .center .btns{
            position: absolute; bottom: .22rem; left: 0; z-index: 10; width: 100%; display: flex; justify-content: space-between;
        }

        .goodslist .list .center .btns .ml{
            color: #FF4443; font-size: .26rem; line-height: .37rem;  padding-top: .21rem;
        }
        .goodslist .list .center .btns .ml b{
            font-size: .4rem; margin-right: .1rem;
        }
        .goodslist .list .center .btns .ml del{
            color: #C5C8CE; font-size: .2rem;
        }
        .goodslist .list .center .btns .go{
            width: 1.45rem;
            height: .66rem; line-height: .66rem;
            background: #FFD676;
            border-radius: 1rem 0px 0px 1rem;
            color: #8F2121;
            font-size: .28rem; font-weight: bold;
            text-align: center;
        }

        .hot-row .swiper-slide{
            width: 33.3%;flex-shrink:0;
        }
        .hot-row .swiper-wrapper {
            white-space: nowrap; display: flex; 
        }


        .loading{
            line-height: 1rem; text-align: center; font-size: .3rem; color: #999;
        }
        .sys{
            width: 100%; height: 100vh; position: fixed; z-index: 9999999;
            background: rgba(255,255,255,.95); display: flex; align-items: center;
            justify-content: center; font-size: .4rem; color: #999;
        }
        #shareID{
            position: fixed;left: 0;bottom: 0;z-index: 500;background: #fff;border-top: 1px solid #979797;padding: 0.13rem 0;width: 100%;
        }
        #shareID a {
            display: block;background: #fa6400;border-radius: 0.38rem;line-height: 0.76rem;height: 0.76rem;text-align: center;color: #fff;margin: 0 0.12rem;
        }

        .back_home{
            width: 30px;height:30px;position: fixed;right:0.3rem;bottom:1.2rem;border-radius: 50%;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;
        }
        .back_home img{
            width: 15px;height:15px;
        }
    </style>
</head>

<body>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/taobaoCode/taobaoCode.js?v=1.3.2"></script>
    <div id="appMain" >

    
        <div class='tmall-one-layout'>
            <div class='time'>每日10点、20点开抢，每日仅有1次机会</div>
            <div class='desc'>
            活动时间：4月5日-5月31日<br>
            【拼手速超值抢】板块，每日20点开抢<br>
            每场提供3款超值商品，仅售1元，每款限量600件，先到先得！
            </div>
            <div class='hot-row'>
            <h3 class='title'>
                <span>拼手速超值抢</span>
                每天20点开抢，不消耗当日机会
            </h3>
            <div class='myswiper'>
                    <div id="mySwiper" class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-free-mode swiper-container-ios">
                        
                        <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">

                            <div
                            class="swiper-slide"
                            v-for="(item, index) in goodsList0" :key="index" :id="getTime(item.activityStartTime) >= new Date()?'':'tagID'+index" @click="isStart(item)">
                            <div class="list">
                                <div class="pic"><img :src="imgFomate(item.mainPic)"></img></div>
                                <h3 class="bt">
                                    <img v-if="item.isTmall == '1'" src="https://sr.ffquan.cn/dtk_www/20200302/bpe8eev6vrkd07vi9t9g10.png" alt="">
                                    <img v-if="item.isTmall != '1'"src="https://p1static.dataoke.com/web/images/tipsection/ico_tb.png" alt="">
                                    {{item.title}}
                                </h3>
                                <div class="quan">抢购价：¥<b>{{item.activityPrice}}</b></div>

                                <div v-if="getTime(item.activityStartTime) < new Date()" class="btn active"><a>立即抢购</a></div> 

                                <div v-if="getTime(item.activityStartTime) >= new Date()" class="btn"><a>{{getTimeText(item.activityStartTime)}}点开抢</a></div>
                            </div>
                            </div>

                        </div>
                    </div>
            </div>
    
            </div>
    
            <h3 class='bts'>
            <span>限量1元购</span>
            以下商品消耗当日机会
            </h3>

            <div class='goodslist' >
                <div v-for="(item, index) in goodsList1" :key="index" class='list'  :id="'goodsList'+index">
                    <div class='pic'><img :src="imgFomate(item.mainPic)"></img></div>
                    <div class='center'>
                    <h4>
                        <img v-if="item.isTmall == '1'" src="https://sr.ffquan.cn/dtk_www/20200302/bpe8eev6vrkd07vi9t9g10.png" alt="">
                        <img v-if="item.isTmall != '1'"src="https://p1static.dataoke.com/web/images/tipsection/ico_tb.png" alt="">
                        {{item.title}}
                    </h4>
                    <div class='quan' style="color: #999;font-size: 0.24rem;">
                        2小时热销 {{item.sales2h}} 件
                        <!-- <div class='coupon' ><i>券</i><span>{{item.activityPrice}}元</span></div> -->
                    </div>
    
                    <div class='btns'>
                        <div class='ml'>抢购价 ¥<b>{{item.activityPrice}}</b><del>¥{{item.originPrice}}</del></div>
                        <div class='go'>去抢购</div>
                    </div>
                    </div>
                </div>
                
    
            </div>

        </div>

        <div class="share" id="shareID"><a>立即分享</a></div>
        <div ref="reference" class="loading">加载中...</div>

        <div class="back_home" v-if="scrollTop>=230" @click="back_home">
            <img src="" alt="">
        </div>

    </div>
</body>

</html>

<script>
    (function(){
        var size = (document.body.clientWidth || document.documentElement.clientWidth);
        document.documentElement.style.fontSize = (size > 750 ? 750 : size) / 7.5 + 'px';
    })();

    Vue.use(VueLazyload, {
        preLoad: 1.3,//
        error: 'https://sr.ffquan.cn/cms_pic/20200622/bro7s7f6vrkd3jat4ujg0.png',
        loading: 'https://sr.ffquan.cn/cms_pic/20200612/brhjkf76vrkcrfpi79eg0.png',
        attempt: 1
    })
    new Vue({
        el: '#appMain',
        data: {
            sys:false,
            time:'',
            goodsList0:[],
            goodsList1:[],
            loading:false,
            linkKZL:'',
            scrollTop:0,
            canScroll:false,
            loadData:false,
            nowPage:1,

        },
        methods: {
            isStart(item){
                if(this.getTime(item.activityStartTime) >= new Date()){
                    layer.msg('抢购暂未开始')
                    return false;
                }
            },
            back_home(){
              $(document).scrollTop(0);
            },
            accSub:function({ num }){
                var r1, r2, m, n;
                try {
                    r1 = num[0].toString().split('.')[1].length;
                } catch (e) {
                    r1 = 0;
                }
                try {
                    r2 = num[1].toString().split('.')[1].length;
                } catch (e) {
                    r2 = 0;
                }
                m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度
                n = r1 >= r2 ? r1 : r2;
                return ((num[0] * m - num[1] * m) / m).toFixed(n);
            },
            digitalAbbNumber :function({ num = 0, unit }){
                var param = {};
                var k = 10000,
                    sizes = ['', '万', '亿', '万亿'],
                    i;
                if (num < k) {
                    return num;
                } else {
                    i = Math.floor(Math.log(num) / Math.log(k));
                    param.value = parseFloat((num / Math.pow(k, i)).toFixed(1));
                    param.unit = sizes[i];
                }
                return param.value + (unit || param.unit);
            },
            getTime:function (time) {
                const newTime = new Date(time.replace(/-/g, "/"));
                return newTime;
            },
            getTimeText:function(time){
                const text = time.split(" ")[1].replace(/00:00/g, "00");
                return text
            },

            handleClipboard :function(event,res,isGoods,text){     
                var _this = this;          
                if(event.getAttribute("isCopy")){
                  return false;
                }
                event.setAttribute("isCopy",true)
                // @ts-ignore
                const clipboardImg = new window.ClipboardJS(event, {
                    text: (trigger) => {
                      return text || _this.handleChange(res,isGoods);
                    }
                });
                clipboardImg.on('success', function(e) {
                  layer.msg(text ? '复制成功，快分享给小伙伴吧~':'口令复制成功，打开手淘抢购')
                  e.clearSelection();
                });

                clipboardImg.on('error', function(e) {  
                    layer.msg('口令复制失败，请联系推择者')
                });
            },

              // 活动专链接
            handleChange : function(res,isGoods){

             // 普通商品转连逻辑
             // @ts-ignore
             var _this = this;

             const resCodeEvent = new window.taobaoCode({
               type: 2, // type=>1 商品转链  2 活动转链
               modelType: 2, // 0 => 默认成功失败提示 modelType => 1 超级红包 2 =>会场弹窗 （判断类型 默认不传，用途复制成功提示文案判断）
               isRedPacket: false, // isRedPacket => true 开启红包流程  isRedPacket=> 关闭红包流程 （是否开启红包弹窗流程）
               params: {
                 ...{
                   activityId: '20150318020003158',
                   site_id: _this.sys.uid,
                   pid: _this.sys.pid,
                   need_tpwd: 1,
                   d_title: res.title || '淘宝特价版天天0元抢',
                   need_short_link:1,
                   pic:res.mainPic,
                 },
                 ...(isGoods ? { public_str: `itemId=${res.goodsId}` } : {}),
                 ...(_this.sys.channelId != "" ? { relationId: _this.sys.channelId } : {})
               }, //参数 具体参数参照  http://wiki.haojiequ.com/?dir=interface%2F%E5%85%AC%E5%85%B1%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3-go&file=1.index.md
               regCode: /\#(.*?)\#/, //替换正则 默认 #淘口令#
               async:false, // 同步还是异步  将不会执行弹窗逻辑需要自己判断 并示例中会返回 （items=>接口专链后地址） 
               template: `复制本段(#淘口令#)，打开手淘APP领取福利`,//替换模版
             });

             if (resCodeEvent.items.code!= 1) {
               return false;
             }
                return isGoods ? `${resCodeEvent.items.data.newTpwd} ${res.title}:/` : `0每天10点，20点抢1元爆品，复制${resCodeEvent.items.data.Tpwd}，打开手淘APP，立即抢购:/`;
            },
 
            getGoodsList:function(_type,page){
                var _this = this;
                page = page || 1;
                $.ajax({
                    url:'https://dtkapi.ffquan.cn/dtk_java_views_api/api/tb/activity/promote/yygList',
                    type:"get",
                    data:{
                        dataType:_type,
                        pageId:page,
                        pageSize: 20,
                        appKey: _config.appKey,
                    }
                }).done(function(res){
                    _this.time = res.time
                    // _type == 0 ? _this.goodsList0 = res.data.list : _this.goodsList1 = res.data.list;
                    _type == 0 && res.data ? _this.sys = res.data.sys:'';
                    _type == 0 && res.data ? _this.linkKZ = res.data.kzWebsite:'';

                    if(_this.loadData == true){
                        _type == 0 ? (res.data?_this.goodsList0 =  res.data.list : '') : (res.data?_this.goodsList1 = _this.goodsList1.concat(res.data.list) :'');
                    }else{
                        _type == 0 ? (res.data?_this.goodsList0 = res.data.list:'') :(res.data?_this.goodsList1 = res.data.list:'');

                    }

                    _this.loadData = false;
                    if(res.data && res.data.list.length!=0){
                        _this.canScroll = true   
                    }

                    setTimeout(function(){
                        for(var i=0; i<_this.goodsList0.length;i++){
                            if(document.getElementById('tagID'+i)!=null){
                                _this.handleClipboard(document.getElementById('tagID'+i),_this.goodsList0[i],true)
                            }
                        }

                        for(var i=0; i<_this.goodsList1.length;i++){
                            _this.handleClipboard(document.getElementById('goodsList'+i),_this.goodsList1[i],true)
                        }
                        

                        if( _this.sys.uid){
                            $.ajax({
                                url:'https://dtkapi.ffquan.cn/taobaoapi/kz-create-short',
                                type:"get",
                                data:{
                                    url:`${_this.linkKZ}#/tmallOne?app_key=${_config.appKey}`
                                },
                            }).done(function(res){
                                _this.handleClipboard(document.getElementById('shareID'),{},false,`每天10点，20点抢1元爆品，快快来抢吧~${res.data}`)
                            })
                        }

                    },500)

                })
            },

            scrollLoad : function (){//
                var _this = this;
                var range = 70;             //距下边界长度/单位px  
                var totalheight = 0;   
                $(window).scroll(function(){  
                    var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)  
                    totalheight = parseFloat($(window).height()) + parseFloat(srollPos);  

                    if(($(document).height()-range <= totalheight) ) {  
                        if( _this.canScroll){
                            _this.nowPage++; 
                            _this.canScroll = false;
                            _this.loadData = true;
                            console.log( _this.nowPage)
                            _this.getGoodsList(1, _this.nowPage) 
                        }
                    }  

                });  
            },
            imgFomate:function(img){
                if(img.indexOf('http')!='-1'){
                    return img
                }else{
                    return 'https:'+img
                }
                
            }
        },
        mounted: function () {
            this.getGoodsList(0);
            this.getGoodsList(1);
            this.scrollLoad();
            var _this = this;
            window.onscroll = function() {
                _this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            }
                      
        },
    })
</script>